<template>
  <div class="swiper-container" ref="mySwiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="(item,index) in bannerList" :key="item.id">
                                <img :src="item.imgUrl" />
                            </div>
                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination"></div>

                        <!-- 如果需要导航按钮 -->
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>
    </div>
</template>

<script>
import Swiper from 'swiper';
export default {
    name:'Carousel',
    props:['bannerList'],
    watch:{
        bannerList:{
            immediate:true,
            handler(newvalue,oldvalue){
            // $nextTick  会等待 循环的Dom重新加载完毕后在进行调用函数
            this.$nextTick(()=>{
                // 采用监视属性是为了可以获取完整的Dom结构  只有更新数据数据后才会调用里面的函数
                new Swiper (this.$refs.mySwiper, {
                    loop: true, // 循环模式选项
                    //  effect : 'fade', //切换效果
                    // 如果需要分页器
                    pagination: {
                    el: '.swiper-pagination',
                    },
                    
                    // 如果需要前进后退按钮
                    navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                    },
                    
                    // 如果需要滚动条
                    scrollbar: {
                    el: '.swiper-scrollbar',
                    },
                    // 自动轮播
                    autoplay: {
                        delay: 3000,
                        stopOnLastSlide: false,
                        disableOnInteraction: true,
                        },
                   
                })        
            })
        }
        }
    }
}
</script>

<style>

</style>